<template>
	<div>
		<div style="height: 80px;line-height: 80px;text-align: center;width: 100%;background-color: #150e52;min-width: 1700px;">
			<div class="searchTop" >
				<ul>
					<li><router-link to="/">首页</router-link></li>
					<li><router-link to="/zhzx">展会资讯</router-link></li>
					<li><router-link to="/ptjs">平台介绍</router-link></li>
					<li><router-link to="/zgzs">展馆展示</router-link></li>
					<li><router-link to="/spzq">视频专区</router-link></li>
					<li><router-link to="/hysy">同期会议</router-link></li>
					<li><router-link to="/sphf">在线观展/历史回顾</router-link></li>
					<li><router-link to="/zstd">知识天地</router-link></li>
					<li><router-link to="/zygx">资源共享</router-link></li>
					<li><router-link to="/gywm">关于我们</router-link></li>
				</ul>
			</div>
		</div>
		<div style="width: 100%;background-color: #fff;height: auto;min-width: 1700px;">
			<div style="width: 1140px;min-width: 1140px;height: 81px;margin: auto;">
				<div style="float: left;    height: 81px;line-height: 81px;">
					<img src="../images/dialogImg1.png" alt=""><img src="../images/logoTitle.png"/>
				</div>
				<div style="float: right; height: 81px;line-height: 81px;position: relative;width: 640px;position: relative;">
					<div style="float: left;height: 81px;width: 500px;position: relative;">
						<el-select v-model="searchType" placeholder="请选择" style="display: inline-block;" class="selectInput" @change="OptionChange">
						    <el-option
						      v-for="item in typeOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
							 
							  >
							   <span style="color:#606266 ;font-size: 17px;">{{item.label}}</span>
						    </el-option>
						  </el-select>
						  <el-input v-model="input" placeholder="请输入内容" style="width:450px;" class="searchInput" ></el-input>
					</div>
					
					  <button style="color: #fff ;font-size: 17px;    border-radius: 30px;margin-left: 20px; margin-top: 20px;
					  height: 44px;width: 120px;background-color: #150e52;float: left;border: 1px solid rgb(21, 14, 82);"
						@click="search(input,1)" 
						
					  >
						  搜索<img style="margin-top: -3px;margin-left: 8px;width: 22px;" src="../images/searchIcon.png"/>
					  </button>
				</div>
			</div>
		</div>
		<div class="searchBox">
		<div class="searchContent" style="" v-if="finalOptions==1">
			<div class="search_module" v-for="(item,index) in info.rows" :key="index">
				<div style="width: 272px;height: 243px;overflow: hidden;">
					<router-link :to="{ name:'zsDetail', query:{id:item.id}}" style="text-decoration: none" target="_blank">
						<img :src="'https://zha.heavenk.com/prod-api'+paths[index]" alt="" style="width: 272px;height: 243px;z-index: 100;">
					</router-link>
				</div>
				<div style="padding: 10px 15px;height: 57px;">
					<div style="text-align: center;color: #150e52;font-size: 18px;font-weight: 600;font-family: PingFangSC-Semibold, sans-serif;
					">{{ item.exhibitorname }}</div>
					<div style="width: 99%;text-align: left;color: #150e52;margin-top: 10px;line-height: 23px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" v-html="item.introductiontoexhibitors"></div>
				</div>
				<router-link :to="{ name:'zsDetail', query:{id:item.id}}" style="text-decoration: none" target="_blank">
				<div class="enterButton2">
					进入展商
				</div>
				</router-link>
			</div>
		</div>
		<div class="searchContent" style="" v-else-if="finalOptions==2">
			<div class="search_module" v-for="(item,index) in info.rows" :key="index">
				<div style="width: 272px;height: 243px;overflow: hidden;"><img :src="'https://zha.heavenk.com/prod-api'+ item.boothpictures" alt="" style="width: 272px;height: 243px;z-index: 100;"></div>
				<div style="padding: 10px 15px;height: 57px;">
					<div style="text-align: center;color: #150e52;font-size: 18px;font-weight: 600;font-family: PingFangSC-Semibold, sans-serif;
					">{{ item.boothname }}</div>
					<div style="width: 99%;text-align: left;color: #150e52;margin-top: 10px;line-height: 23px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.introduce }}</div>
				</div>
				<router-link :to="{ name:'zsDetail', query:{id:item.userId}}" style="text-decoration: none">
				<div class="enterButton2" @click="clickToExhibitor(item.id)">
					进入展位
				</div>
				</router-link>
			</div>
		</div>
		<div class="searchContent" style="" v-else>
			<div class="search_module" v-for="(item,index) in info.rows" :key="index">
				<div style="width: 272px;height: 243px;overflow: hidden;"><img :src="'https://zha.heavenk.com/prod-api'+ item.image" alt="" style="width: 272px;height: 243px;z-index: 100;"></div>
				<div style="padding: 10px 15px;height: 57px;">
					<div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 99%; text-align: center;color: #150e52;font-size: 18px;font-weight: 600;font-family: PingFangSC-Semibold, sans-serif;height: 23px;overflow: hidden;
					">{{ item.articleTitle }}</div>
					<div style="width: 99%;text-align: left;color: #150e52;margin-top: 10px;line-height: 23px;
					 overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" >{{ item.articleSynopsis }}</div>
				</div>
				<router-link target="_blank" :to="{ path: '/wzDetail', query: { id: item.articleId} }" style="color: #150e52;text-decoration: none;">
				<div class="enterButton2">
					点击浏览
				</div>
				</router-link>
			</div>
		</div>
		</div>
		<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;" v-if="total">
			<div style="height: 60px;float: right;margin-top: 0px;">
								 <el-pagination
								      @size-change="handleSizeChange"
								      @current-change="handleCurrentChange"
								      :current-page.sync="currentPage"
								      :page-size="8"
								      layout="prev, pager, next"
								      :total="this.total">
								    </el-pagination>
									<div class="el-pagination__jump">
										共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
											<input type="text" class="inputNum" v-model="pageInputNum"
											oninput="value=value.replace(/[^\d]/g,'');
											if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
											value= value.substr(1,1)}" >
									</div>
									页
									</div>
									
								<button class="button1" style=""  @click="changePage">确定</button>
							</div>
		</div>
		<!-- <mainTop></mainTop> -->
		<div class="wzMiddleBox">
			
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import axios, { Axios } from 'axios';
import mainBottom from '../components/mainBottom.vue'
	export default {
	  components: { 
		  mainBottom,
		  
	   },
	   data(){
		   return{
				input:'',
				info:'',
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum: '',
				currentPage: 1,
				total:5,
				myOptions:1,
				finalOptions:1,
				searchName:'',
				exhibitor:'',
				typeOptions: [{
							value: 1,
							label: '展商'
						}, {
							value: 2,
							label: '展位名'
						}, {
							value: 3,
							label: '资讯'
						}, ],
				searchType:1,
				paths:[],
			   };
			},
		created(){
			this.getZs(1);
			this.getexhibitor;
			this.keyupSubmit();
		},
		methods:{
			keyupSubmit () {
				document.onkeydown = (e) => {
					var _key = window.event.keyCode
					// 防止用户重复回车
					if (_key === 13 && !this.clickState) {
						this.search(this.input,1)
					}
				}
			},
			OptionChange(value) {  
				
				this.myOptions=value
				// console.log('Selected:', this.myOptions); // 这里可以打印或处理选中的选项值  
			},  
			getZs(pnum){

				axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/list',{
					params:{
						pageSize:8,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.info=res.data
					
					// console.log(this.info);
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
					// console.log(this.endMeeting);
					let path = this.info.rows&&this.info.rows.map(item => {  
						let imgArray = item.exhibitorpictures.split(",");  
						return imgArray[0]; // 返回第一个元素，即路径  
					});  
					this.paths=path
					
                })
			},
			clickToExhibitor(id){
				for (let index = 0; index < this.exhibitor.rows.length; index++) {
					if(this.exhibitor.rows[index].exhibitorid===id){
						window.location.href = 'https://zh.heavenk.com/chateau/20227.html?id='+this.exhibitor.rows[index].id;
					}
					
				}
				
		   },
		   getexhibitor(){
				axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/list').then((res)=>{
                    this.exhibitor=res.data
					// console.log(this.exhibitor);
                })

		   },
			search( name,pnum ){
				//console.log('now '+this.myOptions);
				switch (this.myOptions) {
					case 1:
						// 调用搜索接口  
						this.$axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/list', {  
							params: {  
								exhibitorname: name,
								pageSize:8,
								pageNum:pnum,
							}  
						})  
						.then(response => {  
							// 处理搜索结果  
							this.searchName=name
							this.finalOptions=this.myOptions
							this.info=response.data
							// console.log(response.data);  
							this.total=response.data.total
							this.totalPageSize=Math.ceil(this.total/8)
							let path = this.info.rows&&this.info.rows.map(item => {  
							let imgArray = item.exhibitorpictures.split(",");  
							return imgArray[0]; // 返回第一个元素，即路径  
					});  
					this.paths=path
						})  
						.catch(error => {  
							// 处理错误  
							console.error(error);  
						});  
						break;
					case 2:
						this.$axios.get('https://zha.heavenk.com/prod-api/web/booth/list', {  
							params: {  
								boothname: name,
								pageSize:8,
								pageNum:pnum,
							}  
						})  
						.then(response => {  
							// 处理搜索结果  
							this.searchName=name
							this.finalOptions=this.myOptions
							this.info=response.data
							// console.log(response.data);  
							this.total=response.data.total
							this.totalPageSize=Math.ceil(this.total/8)

						})  
						.catch(error => {  
							// 处理错误  
							console.error(error);  
						});  
						break;
					case 3:
						this.$axios.get('https://zha.heavenk.com/prod-api/web/article/searchList', {  
							params: {  
								articleTitle: name,
								pageSize:8,
								pageNum:pnum,
							}  
						})  
						.then(response => {  
							// 处理搜索结果  
							this.searchName=name
							this.finalOptions=this.myOptions
							this.info=response.data
							// console.log(response.data);  
							this.total=response.data.total
							this.totalPageSize=Math.ceil(this.total/8)
						})  
						.catch(error => {  
							// 处理错误  
							// console.error(error);  
						});  
						break;
					default:
						console.log("未定义的选项");
						break;
				}
				
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			//    this.contentPerPage.pn=this.currentPage;
			//    contentList(this.contentPerPage).then(response => {
			//            this.contentPerPageList = response.data;
			//          });
	
				this.search(this.searchName,this.currentPage)
		
				//this.getZs(this.currentPage)

			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=this.pageInputNum;
				this.handleCurrentChange();
			},
		},
		mounted(){
		}
		}
</script>

<style>
	.searchTop{
		width: 1140px;
		min-width: 1140px;
		height: 81px;
		margin: auto;
	}
	.searchTop ul{
		list-style: none;
		/* float: left; */
	}
	.searchTop ul li{
		float: left;
		margin-left:15px;
		margin-right: 14px;
	}
	.searchTop ul li a{
		color: white;
		text-decoration: none;
		font-size: 20px;
		font-weight: 500;
		
	}
	.wzMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f6f6f6;
	}
	.wzDetail{
		width: 1140px;
		min-width: 1140px;
		/* height: 1070px; */
		margin: auto;
		margin-top: 55px;
	}
	.icon{
		display: inline-block;
		margin-right: 40px;
	}
	.enterButton2{
		background-color: #150e52;
		    width: 91%;
		    height: 30px;
		    border-radius: 20px;
		    margin-top: 8px;
		    color: #fff;
		    font-size: 15px;
		    text-align: center;
		    line-height: 30px;
		    cursor: pointer;
		    /* text-align: center; */
		    margin: auto;
	}
	.searchContent{
		margin: auto;
		margin-top: 15px;
		min-height: 400px;
		width: 1140px;
		min-width: 1140px;
	}
	.search_module {
	    width: 272px;
	    height: 365px;
	    background-color: #fff;
	    display: inline-block;
	    margin-right: 17px;
	    margin-top: 17px;
	    overflow: hidden;
	    position: relative;
	    transition: all .2s;
	}
	.search_module:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	}	
	.search_module:nth-child(4n){
		margin-right: 0px !important;
	}
	.searchBox{
		width: 100%;
		min-width: 1700px;
		/* min-width: 1140px; */
		height: auto;
		margin: auto;
		margin-top: 3px;
		/* text-align: center; */
	}
	.selectInput{
		position: absolute;
		    right: 350px;
		    width: 104px;
		z-index: 50;	
	}
	.selectInput .el-input__inner{
		border-radius: 30px;
		border: 2px solid #150e52;
		height: 46px;
		font-size: 16px !important;
		color: #150e52 !important;
	}
	.searchInput{
		position: absolute;
		right: 0px;
		
	}
	.el-select .el-input .el-select__caret{
		color: #150e52 !important;
		font-weight: 600 !important;
		position: absolute !important;
		top:14px !important;
		right: 0px!important;
	}
	.el-select:hover .el-input__inner{
		border: 2px solid #150e52 !important;
	}
	/* .selectInput:hover{
		border: 2px solid #150e52 !important;
	} */
	.el-input.el-input--suffix.is-focus .el-input__inner{
		border: 2px solid #150e52 !important;
		border-radius: 30px;
		height: 46px;
		
	}
		
	.el-input.el-input--suffix .el-input__inner:hover{
		border: 2px solid #150e52 !important;
	}
	/* .el-input .el-input--suffix.is-focus{
		border: 2px solid #150e52 !important;
	} */
	.selectInput .el-input.el-input--suffix{
		height: 51px;
	}
	.selectInput .el-select .el-input__inner:focus{
		border: 2px solid #150e52 !important;
	}
	.el-select .el-input__inner:focus{
		border: 2px solid #150e52 !important;
	}
	.el-select .el-input__inner:focus {
	    border-color: #150e52 !important;
	}
	.selectInput .el-select .el-input__inner:hover,
	.el-select .el-input__inner:focus,
	.selectInput .el-select .el-input__inner:blur{
		border: 2px solid #150e52 !important;
	}
	.selectInput .el-select .el-input.is-focus .el-input__inner{
		border: 2px solid #150e52 !important;
	}
	.selectInput .el-select .el-input .el-input--suffix .is-focus:hover{
		border: 2px solid #150e52 !important;
	}
	.searchInput .el-input__inner{
		border-radius: 30px;
		border: 2px solid #150e52;
		width: 450px;
		padding-left: 106px;
		height: 46px;
		font-size: 16px !important;
		color: #150e52 !important;
	}
	.searchInput .el-input__inner:hover,.searchInput .el-input__inner:focus{
		border: 2px solid #150e52 !important;
	}
	/* .el-select-dropdown.el-popper{
		top: 134px !important;
		min-width: 100px !important;
		left: 908px !important;
	} */
	.el-select__caret{
		    top: 1px;
		    position: absolute;
		    right: 0px;
	}
	.el-select-dropdown__item span{
		font-size: 16px !important;
		color: #150e52 !important;
	}
	/* .el-icon-arrow-up:before{
		content: '\25BC' !important;
	} */
	.searchInput  .el-input__inner::placeholder {
	        color: #150e52;
	    }
	     /* 谷歌 */
	    .searchInput  .el-input__inner::-webkit-input-placeholder {
	        color: #150e52;
	    }
	     /* 火狐 */
	   .searchInput  .el-input__inner:-moz-placeholder {
	        color: #150e52;
	    }
	     /*ie*/
	   .searchInput  .el-input__inner:-ms-input-placeholder {
	        color: #150e52;
	    }
</style>